import React, { Component } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  ImageBackground,
  ScrollView,
  TouchableOpacity,
  TouchableWithoutFeedback,
} from "react-native";
import CustomerHeader from '../../widget/customerHeader'
import img_arr from "../../util/img_arr";
import NetUtil from '../../net/net_util'
import Loading from "../../widget/Loading";

class KnowledgeDetail extends Component{
  constructor(props) {
    super(props);
    this.navBar=null;
    this.id='';
    this.state={
      headerBgColor:'rgba(255,255,255,0)',
      backIconIsWhite:true,
      numLines:0,
      maxHeight:0,
      knowledgeInfo:{
        catalogues:[],
        isLike:false,
      },
      showOpenDetail:false
    }
  }

  componentDidMount() {
    this.id=this.props.route.params.id
    this.getKnowledgeDetail()
  }

  /*获取知识详情*/
  getKnowledgeDetail(){
    Loading.show()
    NetUtil.get('base/knowledge/detail',{'knowledgeId':this.id},(res)=>{
      console.log(res)
      Loading.hide()
      if(res.code==200){
        this.setState({knowledgeInfo:res.data})
      }
    })
  }

  /*收藏*/
  like(){
    let params={
      relationId:this.id,
      type:1
    }
    Loading.show()
    NetUtil.postFrom('member/member/like',params,(res)=>{
      Loading.hide()
      if(res.code==200){
        this.getKnowledgeDetail()
      }
    })
  }

  catalogClick(data){
    this.props.navigation.navigate('WebViewPage',{id:data.id,type:2})
  }
  _onScroll(event){
    let y=event.nativeEvent.contentOffset.y
    if(y<50){
      this.navBar.setNativeProps({style:{backgroundColor:'rgba(255,255,255,0)'}})
      this.setState({backIconIsWhite:true})
    }
    else{
      this.navBar.setNativeProps({style:{backgroundColor:'rgba(255,255,255,1)'}})
      this.setState({backIconIsWhite:false})
    }
  }
  render() {
    let shareIcon=this.state.backIconIsWhite?img_arr.icon_favor_white:img_arr.icon_favor_black
    shareIcon=this.state.knowledgeInfo.isLike==1?img_arr.icon_info_favor_selected:shareIcon
    let iconWidth=(this.state.knowledgeInfo.isLike&&this.state.knowledgeInfo.isLike==1)?22:18
    return (<View style={{flex:1,backgroundColor:'#fff'}}>
      <CustomerHeader ref={ref => this.navBar = ref} canBack={true} style={[styles.nav]} leftOnPress={()=>{this.props.navigation.pop()}} leftImageView={this.state.backIconIsWhite?img_arr.icon_back_white:img_arr.icon_back_black}>
        <View style={styles.rightBarItems}>
          <TouchableOpacity onPress={this.like.bind(this)}>
            <Image style={[styles.barItem,{width:iconWidth,height:iconWidth}]} source={shareIcon}></Image>
          </TouchableOpacity>
          <TouchableOpacity>
            <Image style={styles.barItem} source={this.state.backIconIsWhite?img_arr.icon_share_white:img_arr.icon_share_black}></Image>
          </TouchableOpacity>
        </View>
      </CustomerHeader>
      <ScrollView style={[styles.scroll]} scrollEnabled={true} onScroll={this._onScroll.bind(this)} scrollEventThrottle={10}>
        <ImageBackground style={styles.bg} source={{uri:this.state.knowledgeInfo.image}}>
          <Text style={styles.moduleTitle}>{this.state.knowledgeInfo.title}</Text>
        </ImageBackground>
        <View style={styles.card}>
          <Text numberOfLines={this.state.numLines} style={styles.des} onLayout={(event)=>{
            const height = Math.floor(event.nativeEvent.layout.height || 0);
            if (this.state.maxHeight === 0) {
              this.setState({
                maxHeight: height,
                numLines: 3
              });
              // 第二次当测量的最大高度>设置行数后的高度的时候，则需要展开按钮。
            }else if (this.state.maxHeight > height) {
              if (!this.state.showOpenDetail) {
                this.setState({
                  showOpenDetail: true,
                });
              }
            }
          }}>{this.state.knowledgeInfo.introduction}</Text>
          {this.state.showOpenDetail&&(<Text style={{color:'#3CA1FD',fontSize:13,marginTop:8}} onPress={()=>this.setState({numLines:0,showOpenDetail:false})}>展开</Text>)}
        </View>
        <View style={{height:15,backgroundColor:'#F6F6F6'}}></View>
        <View style={styles.catalog}>
          <Text style={styles.catalogTitle}>课程目录</Text>
          {this.state.knowledgeInfo.catalogues.map((item,index)=>{
            return (
              <TouchableWithoutFeedback onPress={()=>{this.catalogClick(item)}} key={index}>
                <Text style={styles.catalogItem}>{index+1}、{item.title}</Text>
              </TouchableWithoutFeedback>
            )
          })}
        </View>
      </ScrollView>
      <Loading></Loading>
    </View>)
  }
}

export default module=KnowledgeDetail

const styles=StyleSheet.create({
  nav:{
    position:'absolute',
    top:0,
    left:0,
    right:0,
    backgroundColor:'rgba(255,255,255,0)',
    zIndex:9999
  },
  scroll:{
    flex:1
  },
  bg:{
    height:210,
    width:'100%'
  },
  moduleTitle:{
    position: 'absolute',
    color:'#fff',
    fontSize:18,
    fontWeight:'500',
    left:15,
    bottom:24,
    right: 15
  },
  rightBarItems:{
    flexDirection:'row',
    justifyContent:"flex-end",
    alignItems:'center',
    paddingRight:14
  },
  barItem:{
    width:18,
    height: 18,
    marginLeft:21
  },
  card:{
    position:'relative',
    backgroundColor: '#fff',
    marginTop:-15,
    paddingVertical:26,
    paddingHorizontal:15,
    borderTopLeftRadius:7,
    borderTopRightRadius:7
  },
  des:{
    lineHeight:20
  },
  catalog:{
    paddingHorizontal:15,
    paddingVertical: 24
  },
  catalogTitle:{
    color: '#2A2A2A',
    fontSize: 14,
    fontWeight: '600'
  },
  catalogItem:{
    color:'#252525',
    fontSize:15,
    fontWeight:'500',
    marginTop: 33
  }
})
